<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>阻止事件默认行为</title>
    <style type="text/css">
        .search-container {
            display: flex ;
            height: 50px ;
            width: 600px;
            border: 1px solid blue ;
        }
        .input-container {
            flex-basis: 500px;
        }
        .button-container {
            flex-basis: 100px;
        }
    </style>
</head>
<body>
    
    <h3>阻止事件默认行为</h3>

    <div class="wrapper">
        <ul>
            <li> <a href="http://www.kaifamiao.com">开发喵</a> </li>
            <li> <a href="http://mail.163.com">网易邮箱</a> </li>
        </ul>
    </div>

    <div class="wrapper">
        <form action="http://www.baidu.com/s" method="get">
            <div class="search-container">
                <div class="input-container">
                    <input type="text" name="wd">
                </div>
                <div class="button-container">
                    <!-- <input type="submit" value="百度一下"> -->
                    <button type="submit">百度一下</button>
                </div>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        (function(){

            // 通过 document 的 links 获得页面上所有的超链接元素
            // let links = document.links ;
            let links = document.querySelectorAll( 'a' );
            console.log( links );

            let listener = {
                handleEvent(e){
                    console.log( e );
                    // 阻止事件的默认行为
                    e.preventDefault();
                    // 获得事件目标
                    let t = e.target ;
                    console.log( t );
                    // 延迟执行某个操作
                    setTimeout( ()=> {
                        // location.href = t.href ;
                        location.assign( t.href );
                        // location.replace( t.href );
                    } , 5000 );
                }
            }
            Array.from( links ).forEach( a => {
                a.addEventListener( 'click' , listener , false );
            });

            let btn = document.querySelector( 'button[type=submit]' );

            btn.addEventListener( 'click' , {
                handleEvent(e){
                    // 阻止事件默认行为
                    e.preventDefault();
                    let t = e.target ;
                    console.log( e );
                    // 对于表单中的控件来说可以通过 form 属性获得它所在的表单
                    let f = t.form ;
                    console.log( f );
                    // 通过 form 元素的 reset() 函数可以重置表单
                    // 通过 from 元素的 submit() 函数可以提交表单
                    setTimeout( ()=>{
                        f.submit();
                    }, 5000);
                }
            } , false );

        })();
    </script>
    
</body>
</html>